<template>
    <div class="directive-visible-wrapper">
        <div class="royalblue-card" v-toggle-visible.lazy="isVisible">111</div>
        <div class="chinared-card" v-toggle-visible.lazy="isVisible">222</div>

        <el-button type="primary" @click="changeVisible">change visible</el-button>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const isVisible = ref(true)

const changeVisible = () => {
    isVisible.value = !isVisible.value
}
</script>

<style lang="scss" scoped>
.directive-visible-wrapper {
    display: flex;

    .royalblue-card {
        height: 100px;
        width: 100px;
        background-color: royalblue;
    }

    .chinared-card {
        height: 100px;
        width: 100px;
        background-color: orangered;
    }
}
</style>